<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  // this  -> 函数内置的关键词  函数在调用时依存的对象
  // (1) 普通函数 (命名函数和匿名函数)   this -> window   严格模式下:undefined
  // (2) 函数在调用时 属于谁 就指向谁   obj.say  btn.onclick  Tom.say
  // (3) 箭头函数没有自己的this => 向外跳一层找父作用域  
  // (4) 构造函数中this 指向 构造函数在执行过程创建的实例化对象

  // 改变this指向的方法?  
  // call   apply   bind  => 所有的函数均可以使用

  // fn.call()  fn.apply()   借鸡生蛋 => 不影响原函数


  // call(obj,arg1,arg2,...argN)   
  // (1) 调用函数
  // (2) 在此次函数执行过程中  强制将this执行call()方法的第一参数
  // (3) 如果函数需要接收参数  那么就从第二参数开始  依次传入

  function fn(a, b) {
    console.log(this);
    console.log(a, b);
  }

  // fn(); // this -> window

  // (1) 调用函数  不传参 或 传 null undefined  => 不改变
  // fn.call(); // this -> window
  // fn.call(null); // this -> window
  // fn.call(undefined); // this -> window

  // (2) 在此次函数执行过程中  强制将this执行call()方法的第一参数
  // fn.call(document);

  // (3) 如果函数需要接收参数  那么就从第二参数开始  依次传入
  // fn.call(document,10,20);



  // apply(obj,[arg1,arg2,...argN])   
  // (1) 调用函数
  // (2) 在此次函数执行过程中  强制将this执行apply()方法的第一参数
  // (3) 如果函数需要接收参数   需要将参数依次整合到数组中  再将数组 作为第二参数传入

  function fn(a, b) {
    console.log(this);
    console.log(a, b);
  }

  // fn.apply();  //this -> window
  // fn.apply(document.body)
  fn.apply(document.body, [100, 200])




</script>

</html>